

//在 frontPage.html 中 点击 "查看数据"后跳转到 viewData.html。立即执行函数马上添加内容到HTML中
(function () {
  // let n = JSON.parse(
  //   localStorage.getItem("indexOfcurrentOperatedQuestionnaire")
  // );
  viewQuestionnaireHTML(); //展示问卷的数据信息

})();



// function clickReturnToQuestionnairesBtn() {
//   window.location.href = "../html/list.html";
// }

function viewQuestionnaireHTML() { // n - 用于标识当前操作的问卷在localStorage中的下标 ; options - 表示经过统计后，问卷中所有题目的选项情况
  
  console.log("测试：viewQuestionnaireHTML(n) >>");

  document.getElementById("view_questionnaire_content").innerHTML = "";

  let currentOperatedQuestionnaire = JSON.parse(
    localStorage.getItem("currentOperatedQuestionnaire")
  );
  console.log(
    "localStorage中取出当前问卷操作对象currentOperatedQuestionnaire = " +
    currentOperatedQuestionnaire
  );
  console.log(
    "从localStorage中取出 indexOfCurrentOperatedQuestionnaire = " +
    JSON.parse(localStorage.getItem("indexOfcurrentOperatedQuestionnaire"))
  );
  let questions = currentOperatedQuestionnaire.questions;
  console.log(" currentOperatedQuestionnaire 中的 questions = " + questions);

  document.getElementById("quesionnaire_title").innerText =
    currentOperatedQuestionnaire.title;
  for (let i = 0; i < questions.length; i++) {
    //刷新时填充对应的数据到题目里
    let type = questions[i].type;
    if (type == "single") {
      let singleDiv = singleChoiceOfViewQuestionnaire(); //先创建HTML
      //题目 = “Q题号（单选题）” + 题目内容
      let p = singleDiv.getElementsByTagName("p");
      p[0].innerText = p[0].innerText + questions[i].description;

      let labels = singleDiv.getElementsByTagName("label");
      for (let j = 0; j < labels.length; j++) {
        //再填充
        labels[j].lastChild.value = questions[i].answers[j];
      }
      
      
      // let chartDom = document.getElementById('main');
      // let myChart = echarts.init(chartDom);

      // let curOption = {
      //   series: [{
      //     data: [],
      //   }, ],
      // };
      
      // let curOption = options[i];
      // curOption.series[0].type='pie';
      // curOption.series[0].radius='50%';
      
      // curOption && myChart.setOption(curOption);


    } else if (type == "multiple") {
      let multipleDiv = multipleChoiceOfViewQuestionnaire();

      let p = multipleDiv.getElementsByTagName("p");
      p[0].innerText = p[0].innerText + questions[i].description;

      let labels = multipleDiv.getElementsByTagName("label");
      for (let j = 0; j < labels.length; j++) {
        labels[j].lastChild.value = questions[i].answers[j];
      }
    } else {
      let textDiv = textChoiceOfViewQuestionnaire();

      let p = textDiv.getElementsByTagName("p");
      p[0].innerText = p[0].innerText + questions[i].description;

      // let inputs = textDiv.getElementsByTagName("input");
      // inputs[0].value = questions[i].answer;
    }
  }
}

//“查看数据” -> 展示页面 -> "单选题"
function singleChoiceOfViewQuestionnaire() {
  let content = document.getElementById("view_questionnaire_content");
  let div = document.createElement("div");
  let p = document.createElement("p");

  let questionOrder =
    document.getElementById("view_questionnaire_content").children.length + 1;

  p.innerText = "Q" + questionOrder + "（单选题）";

  //div.id = order;
  div.setAttribute("type", "single"); //将该问题标注为 type = single
  div.appendChild(p);

  for (let i = 1; i <= 2; i++) {
    let label = document.createElement("label");

    let inputInner = document.createElement("input");
    inputInner.type = "text";
    inputInner.value = "选项" + i;

    let br = document.createElement("br");
    label.appendChild(inputInner);
    div.appendChild(label);
    div.appendChild(br);
  }

  //编写代码展示数据（ing）！！！！
  // let dataDiv = document.createElement("div");
  // dataDiv.id = "main"+ questionOrder;
  // //dataDiv.className='bar';
  // //dataDiv.innerText="看看是否添加dataDiv成功";
  // div.appendChild(dataDiv);

  content.appendChild(div);

  return div;
}

//“查看数据” -> 展示页面 -> "多题"
function multipleChoiceOfViewQuestionnaire() {
  let content = document.getElementById("view_questionnaire_content");
  let div = document.createElement("div");
  let p = document.createElement("p");

  let questionOrder =
    document.getElementById("view_questionnaire_content").children.length + 1;
  p.innerText = "Q" + questionOrder + "（多选题）";

  div.setAttribute("type", "multiple");
  div.appendChild(p);

  for (let i = 1; i <= 4; i++) {
    let label = document.createElement("label");
    let inputY = document.createElement("input");
    let span = document.createElement("span");
    let br = document.createElement("br");

    //选项内容
    inputY.type = "text";
    inputY.value = "选项" + i;
    //inputY.id = inputX.id + "_text";

    //label.appendChild(inputX);
    label.appendChild(inputY);
    div.appendChild(label);
    div.appendChild(br);
  }

  //编写代码展示数据！！！！
  //编写代码展示数据（ing）！！！！
  // let dataDiv = document.createElement("div");
  // dataDiv.id = "main"+ questionOrder;
  // // dataDiv.className='bar';
  // // dataDiv.innerText="看看是否添加dataDiv成功";
  // div.appendChild(dataDiv);


  content.appendChild(div);

  return div;
}

function textChoiceOfViewQuestionnaire() {
  // 编写代码
  let content = document.getElementById("view_questionnaire_content");
  let div = document.createElement("div");
  //div.id = order;
  div.setAttribute("type", "text");
  let p = document.createElement("p");
  let questionOrder =
    document.getElementById("view_questionnaire_content").children.length + 1;
  p.innerText = "Q " + questionOrder + "（文本题目）";
  // let input = document.createElement("input");
  // input.type = "text";

  div.appendChild(p);
  // div.appendChild(input);

  //编写代码展示数据！！！！
  //编写代码展示数据（ing）！！！！
  // let dataDiv = document.createElement("div");
  // dataDiv.id = "main"+ questionOrder;
  // // dataDiv.className='bar';
  // // dataDiv.innerText="看看是否添加dataDiv成功";
  // div.appendChild(dataDiv);

  content.appendChild(div);

  return div;
}

//统计选项数据
function countOptionsData() {
  // let option = {
  //     series: [
  //       {
  //         data: []
  //       }
  //     ]
  //   };

  let options = new Array(); //可以这样理解：option 是问题，而options则是由多个问题目组成的问卷

  // {
  //    value - 选该选项的个数
  //    name -  该题第的 i 个选项
  // }

  //单选
  let singleOptionData = [{
      value: 0,
      name: 1
    },
    {
      value: 0,
      name: 2
    },
  ];
  //多选
  let multipleOptionData = [{
      value: 0,
      name: 1
    },
    {
      value: 0,
      name: 2
    },
    {
      value: 0,
      name: 3
    },
    {
      value: 0,
      name: 4
    },
  ];
  //文本
  let textOptionData = [{
    value: 0,
    name: 1
  }];

  console.log("----------------------------------------------------------- ");
  let questionnaires = JSON.parse(localStorage.getItem("Questionnaires"));
  console.log("Questionnaires = " + questionnaires);
  let index = JSON.parse(
    localStorage.getItem("indexOfcurrentOperatedQuestionnaire")
  );

  console.log("index = " + index);

  let titleOfCurrentOperatedQuestionnaire = questionnaires[index].title;

  //找到第一份符合的问卷的下标
  let startIndex = 0;
  for (let i = 0; i < questionnaires.length; i++) {
    if (questionnaires[i].title != titleOfCurrentOperatedQuestionnaire) {
      continue;
    } else {
      startIndex = i;
      break;
    }
  }

  //然后利用找到的第一份符合的问卷来初始化 options
  let questions = questionnaires[startIndex].questions;
  for (let j = 0; j < questions.length; j++) {
    if (questions[j].type == "single") {
      //单选
      let curQuestionData = singleOptionData;

      console.log(
        "第459行: curQuestionData.length = " + curQuestionData.length
      ); //正常 - 2

      if (questions[j].value[0] == 1) {
        //如果选的是第一个选项，那么name=1的{value,name}中value+1
        curQuestionData[0].value++;
        //正常 - 1
        console.log(
          "第464行：curQuestionData[0].value = " + curQuestionData[0].value
        );
      } else {
        curQuestionData[1].value++;
        console.log(
          "第467行：curQuestionData[1].value = " + curQuestionData[1].value
        );
      }
      //let curOption=option;
      let curOption = {
        series: [{
          data: [],
        }, ],
      };
      curOption.series[0].data = curQuestionData; //注意数据保存的结构
      //正常 - 2
      console.log(
        "第473行: curOption.series[0].data.length = " +
        curOption.series[0].data.length
      );
      options.push(curOption);

      //正常 - 2
      console.log("--- single: ----");
      console.log(
        " 第478行：options.push(curOption)以后，options[0].series[0].data.length = " +
        options[0].series[0].data.length
      );
    } else if (questions[j].type == "multiple") {
      //多选
      //创建元素存到data数组中，这些元素分别对应记录选项的选择情况
      let curQuestionData = multipleOptionData;
      for (let k = 0; k < questions[j].value.length; k++) {
        let index = questions[j].value[k]; //结合saveData_btn()理解。比如：选第2个选项，那么就会保存2;选第4个选项，那么就会保存4
        curQuestionData[index - 1].value++;
        //option.series.data[index-1].value++; //假如选了第2个选项，那么在data数组中的第2个元素的value属性+1即可
      }

      //let curOption=option;
      let curOption = {
        series: [{
          data: [],
        }, ],
      };
      curOption.series[0].data = curQuestionData; //注意数据保存的结构
      options.push(curOption);

      console.log("--- multiple ---");
      console.log(
        "第493行：options[0].series[0].data.length = " +
        options[0].series[0].data.length
      );
      console.log(
        "第493行：options[1].series[0].data.length = " +
        options[1].series[0].data.length
      );
    } else {
      //文本
      let curQuestionData = textOptionData;
      if (questions[j].answer.length > 15) {
        //大于15的才算有效回答
        curQuestionData[0].value++;
      }

      //let curOption=option;
      let curOption = { // options 包含 -> 多个curOption ，每一个curOption代表一个问题
        series: [{
          data: [],
        }, ],
      };
      curOption.series[0].data = curQuestionData; //注意数据保存的结构
      options.push(curOption);

      console.log("--- text ---");
      console.log(
        "第531行：options[0].series[0].data.length = " +
        options[0].series[0].data.length
      );
      console.log(
        "第532行：options[1].series[0].data.length = " +
        options[1].series[0].data.length
      );
      console.log(
        "第533行：options[2].series[0].data.length = " +
        options[2].series[0].data.length
      );
    }

    console.log("------ " + j + " -------");
    console.log("第512行：options.length = " + options.length);
    console.log("第513行: options = " + options);
    console.log(
      "第514：options[0].series[0].data.length = " +
      options[0].series[0].data.length
    );
  }
  //  console.log("------------------- 出现问题 ------------------------------");
  //  console.log("第509行：options.length = "+options.length);
  //  console.log("第510行: options = "+options);
  // // 不正常 - 1
  //  console.log("第511行：options[0].series[0].data.length = "+options[0].series[0].data.length);
  //  console.log("第512行：options[1].series[0].data.length = "+options[1].series[0].data.length);
  //console.log("第513行：options[2].series[0].data.length = "+options[2].series[0].data.length);

  //最后查找其余符合的问卷，在第一份的基础上，继续进行数据的统计
  for (let i = startIndex + 1; i < questionnaires.length; i++) {
    if (questionnaires[i].title != titleOfCurrentOperatedQuestionnaire)
      continue;
    //？？？？？？会不会有影响，因为上面定义了一个同名的 questions
    let questions = questionnaires[i].questions;
    for (let j = 0; j < questions.length; j++) {
      if (questions[j].type == "single") {
        //单选

        if (questions[j].value[0] == 1) {
          //如果选的是第一个选项，那么name=1的{value,name}中value+1
          options[j].series[0].data[0].value++;
        } else {
          options[j].series[0].data[1].value++;
        }
      } else if (questions[j].type == "multiple") {
        //多选

        for (let k = 0; k < questions[j].value.length; k++) {
          let index = questions[j].value[k]; //结合saveData_btn()理解。比如：选第2个选项，那么就会保存2;选第4个选项，那么就会保存4
          options[j].series[0].data[index - 1].value++;
          //option.series.data[index-1].value++; //假如选了第2个选项，那么在data数组中的第2个元素的value属性+1即可
        }
      } else {
        //文本

        if (questions[j].answer.length > 15)
          //大于15的才算有效回答
          options[j].series[0].data[0].value++;
      }
    }
  }
  console.log("------------------- 最后 -------------------------");
  console.log("options = " + options);
  console.log("第一题选项情况：");
  console.log(
    "options[0].series[0].data.length = " + options[0].series[0].data.length
  );
  console.log(
    "options[0].series[0].data[0].value = " + options[0].series[0].data[0].value
  );
  console.log(
    "options[0].series[0].data[1].value = " + options[0].series[0].data[1].value
  );
  console.log("第二题选项情况：");
  console.log(
    "options[1].series[0].data.length = " + options[1].series[0].data.length
  );
  console.log(
    "options[1].series[0].data[0].value = " + options[1].series[0].data[0].value
  );
  console.log(
    "options[1].series[0].data[1].value = " + options[1].series[0].data[1].value
  );
  console.log(
    "options[1].series[0].data[2].value = " + options[1].series[0].data[2].value
  );
  console.log(
    "options[1].series[0].data[3].value = " + options[1].series[0].data[3].value
  );


  return options;
}